<template>
    <template v-for="menuItem in menuList" :key="menuItem.path">
        <el-sub-menu v-if="menuItem.children && menuItem.children.length" :index="menuItem.path">
            <template #title>
                <span>{{ menuItem.label }}</span>
            </template>
            <Menu :menu-list="menuItem.children"></Menu>
        </el-sub-menu>
        <el-menu-item v-else :index="menuItem.path">
            <template #title>
                <span>{{ menuItem.label }}</span>
            </template>
        </el-menu-item>
    </template>
</template>
<script>
export default defineComponent({
    name: 'Menu',
});
</script>
<script setup>

const props = defineProps({
    menuList: {
        type: Array,
        default: [],
    }
})

const menuList = computed(() => {
    return props.menuList
})

</script>
<style lang='scss' scoped>
</style>
